<template>
  <div class="reserve flex">
    <c-header :active="type" @changeType="getType"></c-header>
    <div class="title">预定样品</div>
    <div class="reserve-main main">
      <div class="fill-info">
        <div class="fill-info-box">
          <div class="fill-info-title" v-if="!info || !info.name">样品寄送信息补充</div>
          <div class="fill-info-details" v-else>
            <p class="fill-info-name">{{info.name}}</p>
            <p class="fill-info-color"><span style="margin-right: 0.18rem;">{{info.phone}}</span><span>{{info.email}}</span></p>
            <p class="fill-info-address">{{info.address}}</p>
          </div>
        </div>
        <div class="fill-info-icon">
          <router-link :to="{path:'/fill-info', query:{ type: type }}"><img src="@/assets/img/edit.png" alt=""></router-link>
        </div>
      </div>
      <div class="product-list" v-if="productList.length > 0">
        <van-swipe-cell :name="`${item.id},${index}`" :before-close="beforeClose" v-for="(item, index) in productList" :key="index"
            @click.native="change(index, item.id, item.is_select)">
          <check-icon :value.sync="item.is_select" class="check-icon-radio">
            <div class="cell">
              <div class="cell-td"><img :src="item.imgurl" alt=""></div>
              <div class="cell-bd">
                <p class="cell-bd_sign">
                  <img src="@/assets/img/product_type01.png" alt="" v-if="item.producttype==0">
                  <img src="@/assets/img/product_type02.png" alt="" v-if="item.producttype==1">
                </p>
                <p class="cell-bd_title">{{item.product_name}}</p>
                <p class="cell-bd_desc">{{item.code}}</p>
              </div>
              <div class="cell-fd">{{item.num}}</div>
            </div>
          </check-icon>
          <template slot="right">
            <van-button square type="danger" text="删除" style="height: 100%;" />
          </template>
        </van-swipe-cell>
      </div>
      <div v-else style="text-align: center;margin: 0.72rem 0 1.44rem;">您还未选择样品，请前往<router-link style="text-decoration: underline;"
          :to="{path:'/product',query:{type:type}}">产品中心</router-link>预定！</div>
    </div>
    <div class="check-icon-all">
      <check-icon :value.sync="checked" class="check-icon" @click.native="checkAll">
        <div class="cell">
          <div class="cell-bd">全选</div>
        </div>
      </check-icon>
      <div class="cell-fd_title" @click.stop="getFile">确认预定</div>
    </div>
    <c-footer :type="type" @changeType="getType"></c-footer>
  </div>
</template>

<script>
  import {
    CheckIcon
  } from 'vux'
  import {
    getApplyCart,
    applyProduct,
    applyChecked,
    ApplyCartRemove
  } from '@/api/index'
  export default {
    components: {
      CheckIcon
    },
    data() {
      return {
        type: this.$route.query.type ? this.$route.query.type : 0,
       // checked: false,
        productList: [],
        info: null
      }
    },
    created() {
      //this.getProductCart()
      this.productList=JSON.parse(localStorage.getItem('productList'))  || [];
      console.log( this.productList)
    },
    computed:{
      checked:{
        get(){
           return this.productList.every(item=>item.is_select)? true: false
        },
        set(){

        }
      }

    },
    methods: {
      isAllChecked() {
        return this.productList.every((e) => {
          return e.checked;
        });
      },
      getProductCart() {
        getApplyCart().then(res => {
          if (res.code == 200) {
            this.info = res.data.address
            res.data.rows.forEach((e, i) => {
              e.checked = e.is_checked == 1 ? true : false
            })
            this.productList = res.data.rows
            if (this.productList.length > 0) {
              this.checked = this.isAllChecked()
            }
          }
        })
      },
      getType(type) {
        this.type = type
      },
      checkAll() {
        this.checked? this.productList.forEach(item=>item.is_select=false) :  this.productList.forEach(item=>item.is_select=true)

          localStorage.setItem('productList',JSON.stringify(this.productList));
        // if (this.productList.length > 0) {
        //   let cart_ids = []
        //   this.productList.forEach((e, i) => {
        //     e.checked = this.checked
        //     cart_ids.push(e.id)
        //   })
        //   let obj = {
        //     cart_ids: cart_ids,
        //     is_checked: this.checked ? 1 : 0
        //   }
        //   applyChecked(obj).then(res => {
        //     if (res.code != 200) {
        //       this.productList.forEach((e, i) => {
        //         e.checked = false
        //       })
        //     }
        //   })
        // } else {
        //   this.$vux.toast.text('您还未添加样品！', 'top')
        //   return
        // }
      },
      getFile() {
        let token = sessionStorage.getItem("token");
        if(this.productList.filter(item=>item.is_select)==0){
          return  this.$vux.toast.text('请先选择商品！', 'top')
        }
        // if (!token) {
        //   this.$vux.toast.text('请先登录！', 'top')
        //   this.$router.push({
        //     path: '/dealer'
        //   })
        // } else
        if (this.info == null || !this.info || !this.info.name) {
          this.$vux.toast.text('您还未填写寄送信息！', 'top')
          this.$router.push({
            path: '/fill-info'
          })
        } else if (this.productList.length < 0) {
          this.$vux.toast.text('您还未添加样品！', 'top')
          this.$router.push({
            path: '/product'
          })
        } else {
          let obj = {
            name: this.info.name,
            email: this.info.email,
            phone: this.info.phone,
            address: this.info.address
          }
          applyProduct(obj).then(res => {
            this.$vux.toast.text(res.msg, 'top')
          })
        }
      },
      change(index, id, checked) {
        console.log(checked)
        let productList=this.productList;
       productList[index].is_select=checked;
       this.productList=productList;
       localStorage.setItem('productList',JSON.stringify(productList));

        // this.productList[index].checked = checked
        // let cart_id = []
        // let is_checked = this.productList[index].checked ? 1 : 0
        // cart_id.push(id)
        // let obj = {
        //   cart_ids: cart_id,
        //   is_checked: is_checked
        // }
        // applyChecked(obj).then(res => {
        //   if (res.code != 200) {
        //     this.productList[index].checked = false
        //   } else {
        //     if (this.isAllChecked()) {
        //       this.checked = true
        //     } else {
        //       this.checked = false
        //     }
        //   }
        // })
      },
      beforeClose({
        name,
        position,
        instance
      }) {
        switch (position) {
          case 'left':
          case 'cell':
          case 'outside':
            instance.close();
            break;
          case 'right':
          let [id, index] = name.split(',')
            this.$dialog.confirm({
              message: '确定删除吗？'
            }).then(() => {
              instance.close();
              console.log(id);
              this.productList=this.productList.filter(item=>item.id!=id);
               localStorage.setItem('productList',JSON.stringify(this.productList));
              // ApplyCartRemove({cart_id: id}).then(res => {
              //   if(res.code == 200){
              //     this.productList.splice(index, 1)
              //   }
              //   this.$vux.toast.text(res.msg, 'top')
              // })
            }).catch(() => {
              instance.close();
            });
            break;
        }
      }
    },
  }
</script>

<style lang="less" scoped>
  .product-list {
    margin-bottom: 1.81rem;
  }

  .check-icon-radio {
    padding: 0.21rem;
    display: flex;
    align-items: center;
    border-bottom: 1px #eaeaea solid;
    position: relative;

    .cell {
      display: flex;

      .cell-td {
        margin-right: 0.36rem;

        img {
          display: block;
          width: 1.44rem;
          height: 1.44rem;
        }
      }

      .cell-bd_title {
        font-size: 0.28rem;
      }

      .cell-bd_sign img{
        width: 60%;
      }

      .cell-bd_desc {
        color: #cd8741;
      }
    }
  }

  .fill-info {
    margin: 0.18rem 0.21rem 0.36rem;
    padding: 0.27rem 0.18rem;
    background: #f6f6f6;
    position: relative;

    .fill-info-title {
      font-size: 0.28rem;
    }

    .fill-info-icon {
      position: absolute;
      top: 0.27rem;
      right: 0.18rem;
    }

    .fill-info-name {
      font-size: 0.28rem;
      font-weight: bold;
    }

    .fill-info-color {
      font-size: 0.25rem;
      color: #6c6c6c;
    }

    .fill-info-address {
      font-size: 0.28rem;
    }
  }

  .check-icon-all {

    position: relative;
    padding: 0.18rem 0;
    box-shadow: 0 -2px 4px #eaeaea;

    .check-icon {
      padding: 0 0.21rem;
      display: flex;
      align-items: center;
      position: relative;
    }

    .cell {
      width: 100%;
      display: flex;
      padding: 0.18rem 0.09rem;
      box-sizing: border-box;
    }

    .cell-fd_title {
      position: absolute;
      top: 50%;
      right: 0.21rem;
      margin-top: -0.36rem;
      font-size: 0.28rem;
      display: flex;
      align-items: center;
      height: 0.72rem;
      padding: 0 0.3rem;
      border: 1px #ccc solid;
      box-sizing: border-box;

      img {
        width: 0.36rem;
        margin-right: 0.09rem;
      }
    }
  }
</style>
